import React from 'react';
import { Alert, Button, SafeAreaView, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
import CustomWebView from './specs/WebViewNativeComponent';
import NativeLocalStorage from './specs/NativeLocalStorage';



function App(): React.JSX.Element {
  const [value, setValue] = React.useState<string | null>(null);

  const [editingValue, setEditingValue] = React.useState<
    string | null
  >(null);

  React.useEffect(() => {
    const storedValue = NativeLocalStorage?.getItem('myKey');
    setValue(storedValue ?? '');
  }, []);

  function getValue() {
    const storedValue = NativeLocalStorage?.getItem('myKey');
    setValue(storedValue ?? '');
  }

  function saveValue() {
    NativeLocalStorage?.setItem(editingValue ?? '<empty>', 'myKey');
    setValue(editingValue);
  }

  function clearAll() {
    NativeLocalStorage?.clear();
    setValue('');
  }

  function deleteValue() {
    NativeLocalStorage?.removeItem("myKey");
    setValue('');
  }
  function reset() {
    setValue('');
  }

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Current stored value is: {value ?? 'No Value'}
        </Text>
        <TextInput
          placeholder="Enter the text you want to store"
          style={styles.textInput}
          onChangeText={setEditingValue}
        />
        <View style={styles.fixToColumn}>
          <View style={styles.fixToRow}>
            <Button title="获取" onPress={getValue} />
            <Button title="存储" onPress={saveValue} />
            <Button title="删除" onPress={deleteValue} />
            <Button title="清除" onPress={clearAll} />
            <Button title="重置text" onPress={reset} />
          </View>
        </View>
        <CustomWebView
          sourceURL="https://react.dev/"
          style={styles.webview}
          onScriptLoaded={() => {
            Alert.alert('Page Loaded');
          }}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 15,
  },
  webview: {
    width: '100%',
    height: 1080,
  },
  fixToRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  fixToColumn: {
    flexDirection: 'column',
    width: "100%",
    height: 60,
  },
  button: {
    margin: 10,
  },
  text: {
    margin: 10,
    fontSize: 20,
  },
  textInput: {
    margin: 10,
    height: 40,
    borderColor: 'black',
    borderWidth: 1,
    paddingLeft: 5,
    paddingRight: 5,
    borderRadius: 5,
  },
});

export default App;